<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<script>
import { ref, reactive, watch } from "vue";
export default {
  setup(props) {
    // const count = ref(0);
    // const data = reactive({
    //   num:10,
    //   number:11,
    //   b:12
    // })
    // watch(()=>data.num,(newVal,oldVal) => { // 注意：在使用watch监听的时候，必须传入要监听的值，（可以是一个ref声明的值，也可以是一个箭头函数）
    //   console.log(newVal); // 1
    //   console.log(oldVal); // 0
    //   // 注意：如果监听的是 reactive 声明的对象，没有oldVal值的
    // });

    // setTimeout(() => {
    //   count.value++;
    //   data.num++
    // }, 1000);









    // 监听多个源
    const num = ref(0);
    const number = ref(20);
    const data = reactive({
      age: 18
    })
    watch([num,number,()=>data.age],([newNum,newNumber,newAge],[oldNum,oldNumber,oldAge])=>{ // 监听多源的时候要用数组
      console.log(newNum,oldNum);// 打印 1 0
      console.log(newNumber,oldNumber); // 打印 21 20
      console.log(newAge,oldAge);
    })
    
    setTimeout(()=>{
      num.value++
      number.value++
      data.age++
    },1000)
  },
};
</script>
